<template>
	<div>
		<div class="title-div">
			<h2 class="title">{{ search }}</h2>
			<span class="sub-title">找到{{count}}个结果</span>
		</div>
		<el-table
				:data="results"
				stripe
				style="width: 100%" background-color="#dfdfdf" default-active="/pageone" :router="true" active-text-color="#F56C6C">
			<el-table-column
					type="index"
					width="50">
			</el-table-column>
			<el-table-column label="音乐标题">
				<template v-slot="{ row }">
						<div class="name-wrap">
							<span @click="playMusic(row.id)" class="item">{{ row.name }}</span>
							<!--<span v-if="row.mvid !== 0" class="iconfont icon-MV" @click="toMv(row.mvid)"></span>-->
						</div>
						<span style="color:gray; font-size:1px" v-if="row.alias.length !== 0">{{ row.alias[0] }}</span>
				</template>
			</el-table-column>
			<el-table-column
					prop="artists[0].name"
					label="歌手"
					width="200">
			</el-table-column>
			<el-table-column
					prop="album.name"
					label="专辑"
					width="200">
			</el-table-column>
			<el-table-column
					prop="duration"
					label="时间">
			</el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="8" layout="total, prev, pager, next, jumper" :total="count">
		</el-pagination>
		<div style="height: 200px">

		</div>
	</div>
</template>

<script>
	export default {
		name: "Result",
		props: ['search'],
		data () {
			return {
				results:[],
				count:0,
				page:1,
			}
		},
		methods:{
			/*enter: function(e){
				console.log(e);
				this.message = '修改值';
			},
			leave: function(e){
				this.message = '默认值111';
			},*/
			showSongs(){
				axios({
					url:"https://autumnfish.cn/search",
					methods: "get",
					params:{
						keywords:this.search,
						type:1,
						limit:5,
						offset:(this.page - 1) * 5
					},
				}).then(res=>{
					console.log(res)
					this.results = res.data.result.songs
					for(let i=0 ;i<this.results.length;i++){
						let min =parseInt(this.results[i].duration/1000/60)
						let sec =parseInt(this.results[i].duration/1000%60)
						if(min<10){
							min='0'+min
						}
						if(sec<10){
							sec='0'+sec
						}
						this.results[i].duration = min+":"+sec
					}
					this.count=res.data.result.songCount

				})
			},
			handleCurrentChange(cpage){
				this.page=cpage;
				this.showSongs()
			},
			playMusic(id){
				axios({
					url:"https://autumnfish.cn/song/url",
					methods: "get",
					params:{
						id
					},
				}).then(res=>{
					this.$store.state.url = res.data.data[0].url;
				})
			},
		},
		beforeMount() {
			this.showSongs()
		},
		watch:{
			search: {
				handler: function (val, oldVal) {
					this.showSongs()
				}
			}
		}
	}
</script>

<style scoped>
	.title-div{
		display: flex;
		align-items: flex-end;
	}
	.title{
		margin-right: 10px;
	}

	.sub-title{
		font-size: 15px;
		color: #bebebe;
	}
</style>